  <template name="ys-personal-info">
    <view class="ys-personal-info">
      <view class="info-content" v-for="(item, index) in list" :key="index">
        <image :src="item.portrait" mode="" class="head-portrait"></image>
        <view class="info">
          <view class="name">{{item.name}}</view>
          <view class="account">{{item.account}}</view>
        </view>
        <view class="qrcode" @click="qrcode"></view>
      </view>
    </view>
  </template>

  <script>
    export default {
        name: "ys-personal-info",
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        mounted() {
        },
        data() {
            return {
    
            };
        },
        methods: {
        qrcode: function(e){
          console.log(e);
          console.log('click');
        }
        }
    }   
  </script>

  <style lang="scss">
    .ys-personal-info{
      background-color: #fff;
      height: 200upx;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      // top:90upx;
      .info-content{
        height: 100upx;
        width: 100%;
        position: relative;
        // background-color: red;
        .head-portrait{
          width: 120upx;
          height: 120upx;
          background-color: aqua;
          position: absolute;
          border-radius: 50%;
          margin-left: 41upx;
          vertical-align: middle;
          top: 45%;
        }
        .info{
          position: absolute;
          left: 180upx;
          .name{
            font-size: 30rpx;
            color: #333;
            margin-top: 40%;
          }
          .account{
            margin-top: 20upx;
            font-size: 24rpx;
            color: #808080;
          }
        }
        .qrcode{
          position: absolute;
          right: 30upx;
          width: 30px;
          height: 30px;
          top: 65%;
          background-image: url("");
          background-size: cover;
          border: 0;
        }
      }
    }
  </style>
